---
slug: ../Carousel
---

<%COMPONENT_OVERVIEW%>

import Basic from "../../_samples/main/Carousel/Basic/Basic.md";
import Cyclic from "../../_samples/main/Carousel/Cyclic/Cyclic.md";
import ArrowsPlacement from "../../_samples/main/Carousel/ArrowsPlacement/ArrowsPlacement.md";
import AccessibleName from "../../_samples/main/Carousel/AccessibleName/AccessibleName.md";
import CardsWithHidden from "../../_samples/main/Carousel/CardsWithHidden/CardsWithHidden.md";
import PageIndicatorType from "../../_samples/main/Carousel/PageIndicatorType/PageIndicatorType.md";
import MultipleItemsPerPage from "../../_samples/main/Carousel/MultipleItemsPerPage/MultipleItemsPerPage.md";

<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Cyclic
When the last page is reached, pressing "Forward" will navigate to the start.
When the first page is reached, pressing "Backward" will navigate to the last page.

<Cyclic />

### Arrows Placement
When **arrowsPlacement** is set to **"Content"**, the arrows are placed on the sides of the current page.
When **arrowsPlacement** is set to **"Navigation"**, the arrows are placed on the sides of the page indicator.

<ArrowsPlacement />

### Page Indicator
When **pageIndicatorType** is set to **"Default"**, the page indicator appear as dots.
When **pageIndicatorType** is set to **"Numeric"** - as numbers.

<PageIndicatorType />

### Multiple Items per Page

The **items-per-page** property
define the number of items per page for given breakpoint ("S", "M", "L" and "XL").

<MultipleItemsPerPage />

### Accessible name
Use the **accessibleName** or the **accessibleNameRef** properties to label the Carousel and improve its accessibility.

<AccessibleName />

### Carousel with Hidden Items
This is a Carousel containing cards where some are hidden using the **hidden** attribute. Hidden items will not be included in the carousel navigation.

<CardsWithHidden />
